// 引入路由api
import { createRouter, createWebHashHistory } from 'vue-router'



// 引入页面
const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')
const UserCenter = () => import('../views/user-center/Index.vue')
const UserProfile = () => import('../views/user-center/Profile.vue')
const UserSettings = () => import('../views/user-center/Settings.vue')
// Vuex
const VuexPage = () => import("../views/Vuex.vue")

const ListDemo = () => import("../views/ListDemo.vue")
// AccountList
const AccountList = () => import("../views/AccountList.vue")


// 404 页
const NotFound = () => import('../views/404.vue')

// 路由配置
const routeConfig = [
    { path: '/', redirect: '/home' },
    { path: '/home', name: 'home', component: Home },
    { path: '/about', name: 'about', component: About },
    // 用户中心
    {
        path: '/user',
        name: 'userCenter',
        component: UserCenter,
        redirect: '/user/profile',
        children: [
            {
                path: 'profile',
                name: 'profile',
                component: UserProfile
            },
            {
                path: 'settings',
                name: 'settings',
                component: UserSettings
            },
        ]
    },
    {
        path: '/vuex',
        name: 'vuex',
        component: VuexPage
    },
    {
        path: '/list-demo',
        name: 'listdemo',
        component: ListDemo
    },
    {
        path: '/account-list',
        name: 'accountList',
        component: AccountList
    },
    // 404
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: NotFound
    }
]

// 创建路由实例
const router = createRouter({
    // 使用 hash模式
    history: createWebHashHistory(),
    // 传入路由的配置
    routes: routeConfig
})

router.beforeEach((to, from) => {
    console.log('前置');
    console.log('to', to);
    console.log('from', from);
})

router.afterEach((to, from) => {
    console.log('后置');
    console.log('to', to);
    console.log('from', from);
})


export default router